<template>
  <div class="relative" @click.prevent="openOrClose">
    <div>
      <div
        class="px-4 py-3 relative hover:opacity-80 flex flex-row items-center gap-3 cursor-pointer z-50  capitalize select-none">
        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
          fill="#000000">
          <path d="M0 0h24v24H0z" fill="none"></path>
          <path
            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z">
          </path>
        </svg>
        <svg class="w-4 h-4" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>Icons/Chevron down</title>
          <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
            stroke-linejoin="round">
            <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
              <polyline id="Path" points="14 5 8 11 2 5"></polyline>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <CountryList v-if="isOpenList" @closeModal="openOrClose" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import CountryList from './CountryList.vue'
export default defineComponent({
  components: {
    CountryList
  },
  setup() {
    const isOpenList = ref(false); // 是否打开国家列表
    const openOrClose = () => {
      isOpenList.value = !isOpenList.value;
    }
    return {
      isOpenList,
      openOrClose
    }
  }
})
</script> 
